<template>
  <div class="body">
    <h1>欢迎<span>注册登录</span></h1>

    <div class="form active11" :class="{ active1: phone.length > 0 }">
      <input
        type="tel"
        placeholder="请输入手机号"
        @input="phonecheck()"
        v-model="phone"
        @paste="phonePaste($event)"
      />
      <span @click="clearphone()" v-show="phone.length > 0"></span>
    </div>

    <div class="form active22" :class="{ active2: msgcode.length > 0 }">
      <input
        style="width: 2rem;"
        v-model="msgcode"
        type="tel"
        @input="msgcodecheck()"
        placeholder="请输入验证码"
      />
      <i @click="sencodemsg()" v-show="msgtext === '获取短信验证码'">{{
        msgtext
      }}</i>
      <i v-show="msgtext !== '获取短信验证码'">{{ msgtext }}</i>
    </div>

    <div class="form active33" :class="{ active3: recode.length > 0 }">
      <input
        type="text"
        placeholder="请输入邀请码(非必填)"
        @input="phonecheck()"
        v-model="recode"
        @paste="phonePaste($event)"
      />
      <span @click="clearphone()" v-show="recode.length > 0"></span>
    </div>

    <div
      class="tijiao"
      :class="{ activebtn: msgcode.length > 0 }"
      @click="send()"
    ></div>

    <h3>
      <h2>
        <a @click="statebrn = !statebrn">
          <img
            v-show="statebrn"
            src="../../assets/img/login_icon_gouxuanzhong.png"
            alt=""
          />
          <img
            v-show="!statebrn"
            src="../../assets/img/login_icon_gouxuanzhong2.png"
            alt=""
          />
        </a>

        <span @click="statebrn = !statebrn">已阅读并同意</span>

        <i @click="$router.push('/xieyi')">网站服务协议及隐私政策</i>
      </h2>
    </h3>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { axiosPostnotoken, axiosPost } from '../../axios/index';

export default {
  name: '',
  data() {
    return {
      phone: '',
      phoneold: '',
      inputstate: true,
      msgcode: '',
      statebrn: false,
      msgtext: '获取短信验证码',
      recode: '',
    };
  },
  mounted() {
    if (this.$route.query.recode) {
      this.recode = this.$route.query.recode;
    }
    let userinfo = localStorage.getItem('userinfo');
    if (userinfo) {
      this.$router.push('/person');
    }
  },
  beforeRouteLeave(to, from, next) {
    let userinfo = localStorage.getItem('userinfo');
    if (!userinfo && to.fullPath == '/team') {
      next('/');
    } else {
      next();
    }
  },
  methods: {
    phonecheck() {
      //检测字符串是否为数字与空格组合 || 是否大于13
      if (!/^[0-9\d\s]*$/.test(this.phone) || this.phone.length > 13) {
        this.phone = this.phone.substr(0, this.phone.length - 1);
      }
      //适当添加空格
      if (this.phone.length > this.phoneold.length) {
        switch (this.phone.length) {
          case 3:
            this.phone = this.phone + ' ';
            break;
          case 8:
            this.phone = this.phone + ' ';
            break;
          case 13:
            if (
              !/^1[3456789]\d{9}$/.test(this.phone.replace(/\s+/g, '')) &&
              this.inputstate
            ) {
              this.inputstate = false;
              setTimeout(() => {
                this.inputstate = true;
              }, 1000);
              return Toast({
                message: '请输入正确的手机号码',
                duration: 1000,
              });
            }
            break;
          default:
            break;
        }
      }
      this.phoneold = this.phone;
    },

    clearphone() {
      this.phone = '';
      this.phoneold = '';
    },

    msgcodecheck() {
      //检测字符串是否为数字与空格组合 || 是否大于4
      if (!/^[0-9\d\s]*$/.test(this.msgcode) || this.msgcode.length > 6) {
        this.msgcode = this.msgcode.substr(0, this.msgcode.length - 1);
      }
    },
    //检测复制文本
    phonePaste() {
      setTimeout(() => {
        //检测字符串是否为数字与空格组合 || 是否大于13
        if (!/^[0-9\d\s]*$/.test(this.phone) || this.phone.length > 13) {
          return Toast({
            message: '请输入正确的手机号码',
            duration: 1000,
          });
        }
        if (
          !/^1[3456789]\d{9}$/.test(this.phone.replace(/\s+/g, '')) &&
          this.inputstate
        ) {
          this.inputstate = false;
          setTimeout(() => {
            this.inputstate = true;
          }, 1000);
          return Toast({
            message: '请输入正确的手机号码',
            duration: 1000,
          });
        }
        this.phone =
          this.phone.slice(0, 3) +
          ' ' +
          this.phone.slice(3, 7) +
          ' ' +
          this.phone.slice(7);
      }, 1);
    },
    sencodemsg() {
      if (
        this.phone.replace(/\s+/g, '').length === 0 ||
        !/^1[3456789]\d{9}$/.test(this.phone.replace(/\s+/g, ''))
      ) {
        return Toast({
          message: '请输入正确的手机号码',
          duration: 1000,
        });
      }
      axiosPostnotoken(
        'code/send',
        {
          mobile: this.phone.replace(/\s+/g, ''),
          type: 5,
        },
        (res) => {
          if (res.code !== 1) {
            return;
          }
          let code = 60;
          this.msgtext = code + 's重新获取';
          let daojishi = setInterval(() => {
            code--;
            this.msgtext = code + 's重新获取';
            if (code == 0) {
              clearInterval(daojishi);
              this.msgtext = code + '获取短信验证码';
            }
          }, 1000);
        }
      );
    },

    send() {
      if (this.statebrn) {
        return Toast({
          message: '请阅读并同意网站服务协议及隐私政策',
          duration: 1000,
        });
      }
      if (!this.msgcode) {
        return Toast({
          message: '请输入正确的验证码',
          duration: 1000,
        });
      }
      if (!this.phone) {
        Toast({
          message: '请输入正确的手机号码',
          duration: 1000,
        });
        return;
      }
      axiosPost(
        'login/smslogin',
        {
          mobile: this.phone.replace(/\s+/g, ''),
          code: this.msgcode,
          recode: this.recode,
        },
        (res) => {
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          Toast({
            message: '登录成功',
            duration: 1000,
          });
          res.data.last_login = new Date().getTime();
          localStorage.setItem('userinfo', JSON.stringify(res.data));

          // if (!sessionStorage.openid) {
          //     this.$router.push('/');
          // }else{
          //     this.$router.go(-1);
          // }
          if (this.recode == '') {
            if (this.$route.query.path) {
              this.$router.go(-1);
            } else {
              this.$router.push('/');
            }
          } else {
            this.$router.go(-1);
          }
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';

.body {
  background: @color4 url('../../assets/img/login_img_bj.png') top right
    no-repeat;
  background-size: 4.25rem auto;
  min-height: 5.68rem;

  .active11 {
    background: rgba(247, 247, 248, 1)
      url('../../assets/img/login_icon_shouji.png') 0.43rem center no-repeat;
    background-size: 0.52rem auto;
  }
  .active1 {
    border: 1px solid @color1;
    background: @color4;
    background: rgba(255, 255, 255, 1)
      url('../../assets/img/login_icon_shouji1.png') 0.43rem center no-repeat;
    background-size: 0.53rem auto;
  }

  .active22 {
    background: rgba(247, 247, 248, 1)
      url('../../assets/img/login_icon_yzm.png') 0.46rem center no-repeat;
    background-size: 0.55rem auto;
  }
  .active2 {
    border: 1px solid @color1;
    background: @color4;
    background: rgba(255, 255, 255, 1)
      url('../../assets/img/login_icon_yzm1.png') 0.46rem center no-repeat;
    background-size: 0.55rem auto;
  }

  .active33 {
    background: rgba(247, 247, 248, 1) url('../../assets/img/yaoqing1.png')
      0.46rem center no-repeat;
    background-size: 0.55rem auto;
  }

  .active3 {
    border: 1px solid @color1;
    background: @color4;
    background: rgba(255, 255, 255, 1) url('../../assets/img/yaoqing11.png')
      0.46rem center no-repeat;
    background-size: 0.55rem auto;
  }

  .activebtn {
    opacity: 1;
  }
}

h1 {
  font-size: 0.62rem;
  font-weight: 500;
  color: rgba(42, 43, 63, 1);
  padding: 0 0.4rem;
  margin-top: 2.3rem;

  span {
    color: @color1;
  }
}

.form {
  width: 6.7rem;
  height: 1.4rem;
  line-height: 1.5rem;
  background: rgba(247, 247, 248, 1);
  border-radius: 0.7rem;
  margin: 0.6rem auto 0;
  border: 1px solid rgba(247, 247, 248, 1);

  .img1 {
    height: 0.55rem;
    margin: 0.43rem 0.33rem 0 0.46rem;
  }

  .img2 {
    height: 0.51rem;
    margin: 0.46rem 0.27rem 0 0.4rem;
  }

  input {
    height: 1.2rem;
    line-height: 0.6rem;
    font-size: 0.44rem;
    border: 0;
    max-width: 4.63rem;
    background: transparent;
    font-weight: normal;
    color: @color1;
    margin-left: 1.4rem;
  }

  input::placeholder {
    font-size: 0.3rem;
    font-weight: normal;
    color: rgba(104, 104, 119, 1);
    opacity: 0.5;
  }

  span {
    width: 0.6rem;
    height: 0.6rem;
    background: url('../../assets/img/gg_icon_sc.png') center center no-repeat;
    background-size: 0.3rem 0.3rem;
    margin: 0.4rem 0.2rem 0 0.05rem;
  }

  i {
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.3rem;
    display: inline-block;
    width: 2.2rem;
    font-size: 0.3rem;
    font-weight: normal;
    color: rgba(104, 104, 119, 1);
    opacity: 0.5;
    margin: 0 0 0 0.6rem;
  }
}

.tijiao {
  width: 1.32rem;
  height: 1.32rem;
  border-radius: 0.66rem;
  margin: 0.85rem auto;
  opacity: 0.8;
  text-align: center;
  line-height: 1.2rem;
  color: @color4;
  font-size: 1rem;
  background: @color1 url('../../assets/img/rightarrow.png') 0.42rem center
    no-repeat;
  background-size: 0.6rem auto;
}

h3 {
  overflow: hidden;
  margin-top: 2.8rem;

  h2 {
    overflow: hidden;
    text-align: center;
    font-size: @font24;
    font-weight: 400;
    color: rgba(104, 104, 119, 1);
    line-height: 0.4rem;
    width: 5.2rem;
    margin: 0 auto;

    img {
      width: 0.25rem;
    }

    a {
      overflow: hidden;
      margin-right: 0.1rem;
      float: left;
      margin-top: 0.03rem;
    }

    span {
      opacity: 0.5;
      float: left;
    }

    i {
      opacity: 0.5;
      text-decoration: underline;
      float: left;
    }
  }
}
</style>
